<div class="layui-fluid" lay-title="修改账号" style="text-align: center;">
  <div class="layui-card">
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="form-group">

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
              <input type="text" name="username" lay-verify="required|username" autocomplete="off" readonly
                onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);"
                class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
              <input type="text" name="email" lay-verify="email" autocomplete="off" readonly
                onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);"
                class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
              <input type="password" name="pass" value="" placeholder="新密码" autocomplete="off" readonly
                onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);"
                class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">重复密码</label>
            <div class="layui-input-inline">
              <input type="password" name="pass2" value="" placeholder="重复密码" autocomplete="off" readonly
                onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);"
                class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'form'], function (admin, form) {
    var $ = layui.$,
      layer = layui.layer;

    // 请求用户信息
    admin.get({
      url: layui.api.admins + 'getuserinfo',
      success: function (result) {
        let user = result.data;
        $('input[name="username"]').val(user.username);
        $('input[name="email"]').val(user.email);
      }
    });

    form.render(null, 'form-group');

    /* 自定义验证规则 */
    form.verify({
      password: function (value, el) {
        if (value.length < 6) return '登录密码不能少于 6 位';
      }
    });

    /* 监听提交 */
    form.on('submit(form-group-submit)', function (data) {
      // 请求用户信息
      admin.post({
        url: layui.api.admins + 'update',
        type: 'post',
        data: data.field,
        success: function (result) {
          layer.alert(result.msg, {
            title: '最终的提交信息'
          })
        }
      });
      return false;
    });
  });
</script>